#!/usr/bin/env bun

/**
 * 测试16:9宽屏布局适配
 */

import { JsonToPptConverter } from '../../../../src/tools/convert/ppt/json-to-ppt.js';
import { resolve } from 'path';

async function testWidescreenLayout() {
  console.log('📐 测试16:9宽屏布局适配');
  console.log('='.repeat(50));

  try {
    // 创建简单的测试数据，重点测试布局
    const testData = [
      {
        year: '2024',
        nextYear: '2025',
        presenter: '布局测试',
        department: '宽屏适配验证',
        date: '2024年12月',
        subtitle: '16:9宽屏格式测试',
        
        contents: [
          '标题页测试 - 应该居中显示',
          '内容页测试 - 应该充分利用宽屏空间',
          '图表页测试 - 图表应该正确定位',
          '多列布局测试 - 左右内容应该合理分布'
        ],
        
        goals_overview: '这是一个测试文本，用于验证16:9宽屏格式下的文本布局是否正确。文本应该充分利用宽屏的空间，不应该只挤在左半部分。',
        goals_list: [
          '✅ 验证文本在宽屏下的显示效果',
          '✅ 确保内容充分利用16:9的宽度',
          '✅ 检查图表和表格的位置是否合理',
          '✅ 测试多列布局的对齐效果'
        ],
        
        projectName: '宽屏布局优化',
        project_desc: '左侧内容：这个项目描述应该显示在左侧，占用合理的宽度比例。',
        tech_stack: [
          '16:9宽屏支持',
          '自适应布局',
          '百分比定位',
          'PPTXGenJS优化'
        ],
        achievements: [
          '💻 全屏宽度：充分利用16:9格式的完整宽度',
          '📊 图表布局：图表位置和尺寸适配宽屏',
          '📝 文本排版：文本换行和对齐优化',
          '🎯 视觉平衡：左右内容分布均衡'
        ],
        
        // 简单的图表数据用于测试布局
        performance_chart: [
          { name: '布局测试', labels: ['左', '中', '右'], values: [30, 50, 20] }
        ],
        
        tech_distribution: {
          labels: ['宽屏', '标准', '其他'],
          values: [70, 25, 5]
        },
        
        project_timeline: {
          series: [
            {
              name: '布局优化进度',
              labels: ['开始', '调试', '优化', '完成'],
              values: [0, 30, 80, 100]
            }
          ]
        },
        
        performance_trend: {
          series: [
            {
              name: '宽屏适配率',
              labels: ['修复前', '修复后'],
              values: [50, 100]
            }
          ]
        },
        
        optimization_summary: '布局优化总结：通过修复16:9宽屏的坐标计算，内容现在可以充分利用完整的幻灯片空间，不再局限在左半部分。',
        
        metrics_table: [
          ['测试项目', '修复前', '修复后', '改善幅度'],
          ['内容宽度利用率', '50%', '90%', '+40%'],
          ['视觉平衡度', '差', '优秀', '显著提升'],
          ['用户体验', '一般', '专业', '质的飞跃']
        ],
        
        metrics_summary: '🎯 布局测试结果：16:9宽屏适配已完成，内容布局专业美观！',
        
        challenges_intro: '在16:9宽屏适配过程中遇到的主要挑战：',
        challenges_table: [
          ['挑战', '影响', '解决方案', '效果'],
          ['坐标系统不匹配', '高', '重新计算16:9尺寸', '完美解决'],
          ['百分比转换错误', '高', '分别处理宽度和高度', '精确定位'],
          ['硬编码位置', '中', '使用相对坐标', '自适应布局']
        ],
        
        skills_growth: [
          '📐 16:9布局设计：掌握宽屏幻灯片的最佳实践',
          '⚡ 坐标系统：理解PPTXGenJS的坐标计算机制',
          '🎨 视觉平衡：学会在宽屏上创造和谐的布局',
          '🔧 调试技能：快速定位和解决布局问题'
        ],
        
        certifications: [
          '🏆 16:9宽屏布局专家认证',
          '📐 PPT设计最佳实践证书',
          '🎯 用户体验优化认证'
        ],
        
        next_goals: [
          '🎯 继续优化：进一步完善各种屏幕比例的适配',
          '📱 响应式设计：支持更多设备的显示格式',
          '🎨 模板扩展：创建更多专业的16:9模板',
          '⚡ 性能提升：优化大尺寸PPT的生成速度'
        ],
        
        roadmap: [
          ['阶段', '目标', '预期效果'],
          ['第1阶段', '16:9适配完成', '✅ 已完成'],
          ['第2阶段', '多模板支持', '🔄 进行中'],
          ['第3阶段', '响应式布局', '📋 计划中'],
          ['第4阶段', '性能优化', '📋 计划中']
        ]
      }
    ];

    const converter = new JsonToPptConverter();
    const outputPath = resolve('/Users/ahata/Downloads/widescreen-layout-test.pptx');
    
    console.log('📊 生成16:9宽屏布局测试PPT...');
    
    const result = await converter.generateFromTemplate({
      templateName: 'year-end-tech',
      data: testData,
      outputPath: outputPath,
      options: {
        author: '布局测试',
        title: '16:9宽屏布局验证',
        theme: 'modern',
        size: 'widescreen', // 确保使用宽屏格式
        includePageNumbers: true
      }
    });

    if (result.success) {
      console.log('\n✅ 16:9宽屏布局测试成功！');
      console.log(`📁 测试文件: ${result.outputPath}`);
      console.log(`📄 幻灯片数量: ${result.slideCount}`);
      console.log(`📦 文件大小: ${Math.round(result.size / 1024)}KB`);
      
      console.log('\n🎯 验证要点:');
      console.log('   📐 检查内容是否充分利用16:9的完整宽度');
      console.log('   📊 确认图表位置和尺寸是否合理');
      console.log('   📝 验证文本是否不再局限在左半部分');
      console.log('   🎨 观察整体视觉平衡是否专业美观');
      
      console.log('\n🔧 修复内容:');
      console.log('   ✨ 16:9坐标系统: 宽度13.33英寸，高度7.5英寸');
      console.log('   📏 位置计算优化: 分别处理宽度和高度百分比');
      console.log('   🎯 硬编码修复: 标题、页码等使用正确坐标');
      console.log('   🎨 装饰元素适配: 左侧装饰线和遮罩层尺寸修正');
      
    } else {
      console.error('❌ 16:9宽屏布局测试失败:', result.message);
    }

  } catch (error) {
    console.error('❌ 测试失败:', error);
  }
}

if (import.meta.main) {
  testWidescreenLayout();
}
